export const addImageList = (editor, opts) => {
  const { Components } = editor;
  const { id, label } = opts;

  const listPfx = opts.classPrefix;
  const idContainer = `${id}-container`;
  const idListItem = `${id}-list-item`;
  const idListLink = `${id}-list-link`;
  const idListImage = `${id}-list-image`;

  Components.addType(id, {
    model: {
      defaults: {
        droppable: false,
        name: label,
        attributes: { class: listPfx },
        components: { type: idContainer },
        styles:
          (opts.style ||
            `
          .${listPfx} {
            padding: 0;
            margin: 0;
          }

          .${listPfx}-container {
            list-style-type: square;
            padding-left: 0;
          }

          .${listPfx}-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
          }

          .${listPfx}-link {
            color: inherit;
            text-decoration: none;
            flex:1;
          }

          .${listPfx}-image {
            object-fit: cover;
            margin-right: 20px;
          }

          .${listPfx}-text-container {
            width:100%;
            list-style-type: square;
            padding-left: 0;
            margin: 0;
          }

          .${listPfx}-text-container li {
            border-bottom: 1px dotted #000;
            padding:2px;
            margin-bottom: 5px;
          }
        `) + opts.styleAdditional,
      },
    },
  });

  Components.addType(idContainer, {
    model: {
      defaults: {
        attributes: {
          class: `${listPfx}-container`,
          "data-gjs": "image-text-list",
        },
        name: "Image Text List Container",
        droppable: false,
        draggable: false,
        removable: false,
        copyable: false,
        highlightable: false,
        components: [
          {
            type: idListItem,
            components: [
              { type: idListImage, attributes: { alt: "Image" } },
              {
                tagName: "ul",
                attributes: { class: `${listPfx}-text-container` },
                components: [
                  {
                    tagName: "li",
                    attributes: { class: `${listPfx}-text-container` },
                    components: [
                      { type: idListLink, components: "基础实验3室" },
                    ],
                  },
                  {
                    tagName: "li",
                    attributes: { class: `${listPfx}-text-container` },
                    components: [
                      { type: idListLink, components: "多功能实训室" },
                    ],
                  },
                ],
              },
            ],
          },
        ],
      },
    },
  });

  Components.addType(idListItem, {
    model: {
      defaults: {
        name: "List Item",
        attributes: { class: `${listPfx}-item` },
      },
    },
  });

  Components.addType(idListLink, {
    extend: "link",
    model: {
      defaults: {
        name: "List Link",
        draggable: `[data-gjs-type="${idContainer}"]`,
        attributes: { class: `${listPfx}-link` },
      },
    },
  });

  Components.addType(idListImage, {
    extend: "image",
    model: {
      defaults: {
        name: "List Image",
        draggable: false,
        droppable: false,
        attributes: { class: `${listPfx}-image` },
      },
    },
  });
};
